<template>
    <div class="home">
        <div class="row">
            <div class="col-3">
                <h3>Draggable 1</h3>
                <draggable
                    class="dragArea list-group"
                    :list="list1"
                    :move="onMove"
                    :clone="onClone"
                    :group="{ name: 'people', pull: 'clone', put: false }"
                >
                    <div
                        class="list-group-item"
                        v-for="element in list1"
                        :key="element.name"
                    >
                        {{ element.name }}
                    </div>
                </draggable>
            </div>
            <div class="col-6">
                <h3>Transition</h3>
                <draggable
                    class="list-group"
                    tag="ul"
                    :list="list"
                    v-bind="dragOptions"
                    group="people"
                    @start="drag = true"
                    @end="drag = false"
                >
                    <transition-group
                        type="transition"
                        :name="!drag ? 'flip-list' : null"
                    >
                        <li
                            class="list-group-item"
                            v-for="element in list"
                            :key="element.id"
                        >
                            <i
                                :class="
                                    element.fixed
                                        ? 'fa fa-anchor'
                                        : 'glyphicon glyphicon-pushpin'
                                "
                                @click="element.fixed = !element.fixed"
                                aria-hidden="true"
                            ></i>
                            {{ element.name }}
                        </li>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import draggable from "vuedraggable";

const message = [
    "vue.draggable",
    "draggable",
    "component",
    "for",
    "vue.js 2.0",
    "based",
    "on",
    "Sortablejs"
];
@Component({
    name: "Home2NotAlive",
    components: {
        draggable
    }
})
export default class Home2 extends Vue {
    list1 = [
        { name: "John", id: 1, fixed: true },
        { name: "Joao", id: 2, fixed: true },
        { name: "Jean", id: 3, fixed: true },
        { name: "Gerard", id: 4, fixed: true }
    ];

    list = message.map((name, index) => {
        return { name, id: index + 1 };
    });

    drag = false;

    get dragOptions() {
        return {
            animation: 200,
            group: "description",
            disabled: false,
            ghostClass: "ghost"
        };
    }

    onMove({ relatedContext }: any) {
        const relatedElement = relatedContext.element;
        // const draggedElement = draggedContext.element;
        return !relatedElement || !relatedElement.fixed;
    }

    onClone(e: any) {
        console.log('e', e);
        return {
            ...e,
            id: +new Date(),
            fixed: false
        };
    }

    sort() {
        this.list = this.list.sort((a: any, b: any) => a.order - b.order);
    }

    onGroupsChange(e: any) {
        console.log({ e });
    }

    added(...e: any[]) {
        console.log("added", e);
    }

    removed(...e: any[]) {
        console.log("removed", e);
    }

    reordered(...e: any[]) {
        console.log("reordered", e);
    }
}
</script>

<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.button {
    margin-top: 35px;
}

.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}

.list-group {
    min-height: 20px;
}

.list-group-item {
    cursor: move;
}

.list-group-item i {
    cursor: pointer;
}
</style>
